<template>
  <div class="mylnfo">
    <hmNavBar title="我的资料" path="/home/my"></hmNavBar>
    <div class="content">
      <my-cell
        title="头像"
        :value="userInfo.avatar"
        class="img"
        type="img"
        @click.native="goEditlnfo('avatar')"
      ></my-cell>
      <div class="box">
        <my-cell
          title="昵称"
          :value="userInfo.nickname"
          class="nickname"
          @click.native="goEditlnfo('nickname')"
        ></my-cell>
        <my-cell
          title="性别"
          :value="sexObj[userInfo.gender]"
          @click.native="showGender = true"
        ></my-cell>
        <my-cell
          title="地区"
          :value="area.city_list[userInfo.area]"
          @click.native="showarea = true"
        ></my-cell>
        <my-cell
          title="个人简介"
          :value="userInfo.intro"
          @click.native="goEditlnfo('intro')"
        ></my-cell>
      </div>
      <van-button class="bottom" block @click="quit"
        ><span class="red">退出登录</span></van-button
      >
    </div>
    <!-- 性别选择 -->
    <van-popup v-model="showGender" position="bottom">
      <van-picker
        title="修改性别"
        show-toolbar
        :columns="Object.values(sexObj)"
        :default-index="userInfo.gender"
        @cancel="showGender = false"
        @confirm="genderConfirm"
      ></van-picker>
    </van-popup>
    <!-- 城市选择 -->
    <van-popup v-model="showarea" position="bottom">
      <van-area
        title="地区修改"
        :area-list="area"
        columns-num="2"
        :value="userInfo.area"
        @cancel="showarea = false"
        @confirm="areaConfirm"
      ></van-area>
    </van-popup>
  </div>
</template>

<script>
import MyCell from './myCell'
import { mapState } from 'vuex'
import area from '@/assets/js/area.js'
import { removeLocal } from '@/utils/local.js'
import { auEdit } from '@/api/my.js'

export default {
  components: { MyCell },
  name: 'mylnfo',
  data () {
    return {
      showGender: false, // 性别选择弹框提示
      showarea: false, // 地区选择
      area: area,
      sexObj: {
        0: '保密',
        1: '男',
        2: '女'
      }

      // bol: false
    }
  },
  methods: {
    quit () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '您确定退出该APP吗?'
        })
        .then(() => {
          // 删除token
          removeLocal('token')
          // 修改登录状态
          this.$store.commit('setIsLogin', false)
          // 跳转
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    },
    // 性别选择确定
    genderConfirm (value, index) {
      console.log(value)
      console.log(index)
      // 点击确定隐藏弹框
      this.showGender = false
      this.editInfo({
        gender: index
      })
    },
    // 城市选择确定
    areaConfirm (value, index) {
      // 点击确定隐藏弹框
      this.showarea = false

      // 修改用户信息
      this.editInfo({
        area: value[1].code
      })
    },
    // 编辑用户信息
    editInfo (obj) {
      // 显示loading
      this.$toast.loading({
        duration: 0
      })
      auEdit(obj).then(() => {
        this.$toast.success('修改资料成功')
        // 更新vuex中的userInfo
        this.$store.dispatch('refreshUserInfo')
      })
    },

    // 点击昵称
    goEditlnfo (str) {
      this.$router.push('/home/editlnfo?type=' + str)
    }
    // bol(){
    //   if(!bol==true){
    //     this.bol = true
    //     this.$nextTick(){

    //     }
    //   }
    // }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  mounted () {
    document.querySelector('body').style.backgroundColor = '#f7f4f5'
  },
  beforeDestroy () {
    // 销毁前： 什么都可以访问，准备销毁，往往用于做一个善后
    document.querySelector('body').style.backgroundColor = '#fff'
  }
}
</script>

<style lang="less" scoped>
.mylnfo {
  .content {
    padding: 18px @p15;
    background-color: #f7f4f5;
    font-size: 15px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #181a39;
    line-height: 42px;
    letter-spacing: 0px;
    height: 1000px;
    .img {
      border-radius: 8px;
      overflow: hidden;
    }
    .box {
      border-radius: 8px;
      overflow: hidden;
      padding-top: 10px;
    }
  }

  .bottom {
    margin-top: 10px;
    border-radius: 8px;
    .red {
      color: red;
    }
  }
}
</style>
